import './ResultBody.css'
import {useState} from 'react'

export default function ResultBody(props) {
    const [equipment] = useState(props.equipment)
    
    return (    
        <>
            <div className='resultBody'>
                <div className='resultTitle'>
                    {equipment ? <div className='equipmentName'>{props.effects[0].name + ' ' + equipment.name} {equipment.isArmor ? equipment.part : ''}</div> : ''}
                </div>
                <ul className="effects">
                    <li className='effectLine'><div className='star'>⭐</div> <div className='effectDesc'>{props.effects[0].description}</div></li>
                    <li className='effectLine'><div className='star'>⭐⭐</div> <div className='effectDesc'>{props.effects[1].description}</div></li>
                    <li className='effectLine'><div className='star'>⭐⭐⭐</div> <div className='effectDesc'>{props.effects[2].description}</div></li>
                </ul>
            </div>
        </>
    );
}